<template>
    <div id="test_app">
        <!--echarts的容器-->
        <div id="main" style="width: 100%;height: 270px;background:#fff"></div>
    </div>
</template>
   
<script>
import { getHomeList } from "@/api/index";
import * as echarts from 'echarts'
export default {
    name: 'ViewLine',
    data() {
        return {
            charts: '',
            opinionData: ["1000", "2000", "1800", "1300", "1600", "2100", "2800", "2900", "2850", "2450", "3050", "3970"]//数据
        }
    },
    methods: {
        // 获取统计渠道数据
        async handleValid() {
            const _data = await getHomeList();
            // this.opinionData = _data.data[0].opinionData
        },

        drawLine(id) {
            this.charts = echarts.init(document.getElementById(id))
            this.charts.setOption({
                title: {
                    left: '3%',
                    top: '5%',
                    text: "月销售量",//标题文本，支持使用 \n 换行。
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    align: 'right',//文字在前图标在后
                    left: '3%',
                    top: '15%',
                },
                grid: {
                    top: '30%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    axisTick: {
                        alignWithLabel: true //保证刻度线和标签对齐
                    },
                    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"] //x坐标的名称

                },
                yAxis: {
                    type: 'value',
                    boundaryGap: true,
                    splitNumber: 4, //纵坐标数
                    interval: 1000 //强制设置坐标轴分割间隔
                },

                series: [{
                    type: 'line', //折线图line;柱形图bar;饼图pie
                    stack: '总量',
                    areaStyle: {
                        //显示区域颜色---渐变效果
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgb(255,200,213)' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#ffffff' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    itemStyle: {
                        color: 'rgb(255,96,64)', //改变折线点的颜色
                        lineStyle: {
                            color: 'rgb(255,96,64)' //改变折线颜色
                        }

                    },
                    data: this.opinionData
                }]
            })
        }
    },
    //调用
    mounted() {
        // 获取统计渠道数据
        this.handleValid()

        this.$nextTick(function () {
            this.drawLine('main')
        })
    }
}
</script>
   
<style scoped>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
</style>